import 'package:flutter/material.dart';

/// GestureDetector是一个用于手势识别的功能性组件，我们通过它可以来识别各种手势。
/// GestureDetector实际上是指针事件的语义化封装，接下来我们详细介绍一下各种手势识别。
/// Stack组件可以将子组件叠加显示，根据子组件的顺利依次向上叠加,類似安卓的framlayout
class StackWidget extends StatefulWidget {
  final String? title;

  StackWidget({this.title}) : super();

  @override
  State<StatefulWidget> createState() {
    return _GestureDetectorTestRouteState();
  }
}

class _GestureDetectorTestRouteState extends State<StackWidget> {
  double _top = 100; //距顶部的偏移
  double _left = 100; //距左边的偏移
  double _top2 = 100;
  double _top3 = 200;
  double _width = 200.0; //通过修改图片宽度来达到缩放效果

  double toptop = 300;
  double leftleft = 200;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title ?? ""),
        ),
        body: Stack(
          children: <Widget>[
            Positioned(
              width: 100,
              height: 100,
              top: 20,
              left: _left,
              child: GestureDetector(
                child: CircleAvatar(child: Text("A")),
                //手指按下时会触发此回调
                onPanDown: (DragDownDetails e) {
                  //打印手指按下的位置(相对于屏幕)
                  print("用户手指按下：${e.globalPosition}");
                },
                //手指滑动时会触发此回调
                onPanUpdate: (DragUpdateDetails e) {
                  //用户手指滑动时，更新偏移，重新构建
                  setState(() {
                    _left += e.delta.dx;
                    _top += e.delta.dy;
                  });
                },
                onPanEnd: (DragEndDetails e) {
                  //打印滑动结束时在x、y轴上的速度
                  print(e.velocity);
                },
              ),
            ),
            Positioned(
                width: 80,
                height: 80,
                top: _top2,
                child: GestureDetector(
                    child: CircleAvatar(child: Text("垂直滑动")),
                    //垂直方向拖动事件
                    onVerticalDragUpdate: (DragUpdateDetails details) {
                      setState(() {
                        _top2 += details.delta.dy;
                      });
                    })),
            Positioned(
                width: 80,
                height: 80,
                left: _top3,
                child: GestureDetector(
                    child: CircleAvatar(child: Text("水平滑动")),
                    //垂直方向拖动事件
                    onHorizontalDragUpdate: (DragUpdateDetails details) {
                      setState(() {
                        _top3 += details.delta.dx;
                      });
                    })),
            // Stack(
            //   children: <Widget>[
            // Positioned(
            //   width: 80,
            //   height: 80,
            //   top: toptop,
            //   left: leftleft,
            //   child: GestureDetector(
            //     child: CircleAvatar(child: Text("手势竞争")),
            //     //垂直方向拖动事件
            //     onVerticalDragUpdate: (DragUpdateDetails details) {
            //       setState(() {
            //         toptop += details.delta.dy;
            //       });
            //     },
            //     onHorizontalDragUpdate: (DragUpdateDetails details) {
            //       setState(() {
            //         leftleft += details.delta.dx;
            //       });
            //     },
            //   ),
            // )
            //   ],
            // );
          ],
        ));
  }

  @override
  void initState() {
    super.initState();
  }
}
